<div class="importance-transfer-page">
  <div class="container-fluid main">

    <div class="row">
      <div class="col-sm-10">
        <h2>{{ 'IMPORTANCE_TRANSFER_MULTISIGNATURE_TITLE' | translate }}</h2>
      </div>
    </div>

    <div class="row">

      <div class="col-md-6 col-sm-12">
        <div class="panel-heading">
            <h3>{{ 'IMPORTANCE_TRANSFER_MULTISIG_NAME' | translate }}</h3>
        </div>
        <div class="panel-body">
          <!-- PASSWORD FIELD -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label ng-class="!$ctrl.common.password.length ? 'has-error' : ''">{{ 'FORM_PASSWORD' | translate }}:</label>
              </span>
              <input class="form-control"
                type="password"
                placeholder="{{ 'FORM_PASSWORD_FIELD_PLACEHOLDER' | translate }}"
                ng-model="$ctrl.common.password" ng-class="!$ctrl.common.password.length ? 'has-error' : ''"/>
            </div>
          </fieldset>
          <!-- MULTISIG ACCOUNT TO DELEGATE AWAY -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'GENERAL_MULTISIG_ACCOUNT' | translate }}: </label>
              </span>
              <select class="form-control" ng-options="(acc.address | fmtContact:$ctrl.contacts) for acc in $ctrl._DataBridge.accountData.meta.cosignatoryOf track by acc.address" ng-model="$ctrl.formData.multisigAccount" ng-disabled="!$ctrl.common.password.length" ng-change="$ctrl.generateData()">
                <option value="" disabled selected> {{'IMPORTANCE_TRANSFER_MULTISIG_SELECT' | translate}}</option>
              </select>
            </div>
          </fieldset>
          <!-- MULTISIG ACCOUNT BALANCE -->
          <fieldset class="form-group" ng-show="$ctrl.formData.multisigAccount">
            <div class="input-group">
              <span class="input-group-btn">
               <label>{{'FORM_SIDE_BTN_BALANCE' | translate}}</button>
              </span>
              <div class="form-control formFloat" readOnly>
                <input class="readOnly" type="text" value="{{ ($ctrl.formData.multisigAccount.balance | fmtNemValue)[0] }}.{{ ($ctrl.formData.multisigAccount.balance | fmtNemValue)[1] }}" readOnly/>
                <label class="floatRight"><small>XEM</small></label>
              </div>
            </div>
          </fieldset>
          <!-- REMOTE ACCOUNT -->
          <div ng-show="$ctrl.remoteAccountAddress.length">
            <fieldset class="form-group" ng-show="!$ctrl.customKey">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'IMPORTANCE_TRANSFER_REMOTE_ACCOUNT' | translate }}</label>
                </span>
                <input type="text" class="form-control" ng-model="$ctrl.remoteAccountAddress" readOnly>
              </div>
            </fieldset>
          </div>
          <!-- REMOTE ACCOUNT CUSTOM KEY-->
          <fieldset class="form-group" ng-show="$ctrl.customKey">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'IMPORTANCE_TRANSFER_REMOTE_PUBLIC' | translate }}: </label>
              </span>
              <input type="text" class="form-control" ng-model="$ctrl.formData.remoteAccount" placeholder="0257b05f601ff829fdff84956fb5e3c65470a62375a1cc285779edd5ca3b42f6" ng-change="$ctrl.generateAddress()">
            </div>
          </fieldset>
          <!-- CUSTOM PUBLIC KEY GENERATED REMOTE ACCOUNT -->
          <div ng-show="$ctrl.customGeneratedRemote.length && $ctrl.customKey">
            <fieldset class="form-group">
              <div class="input-group">
                <span class="input-group-btn">
                  <label>{{ 'IMPORTANCE_TRANSFER_REMOTE_ACCOUNT' | translate }}</label>
                </span>
                <input type="text" class="form-control" ng-model="$ctrl.customGeneratedRemote" readOnly>
              </div>
            </fieldset>
          </div>
          <!-- CHECKBOX TO ALLOW ENTERING OF PUBLIC KEY -->
          <div class="row checkboxes">
            <div class="col-md-6">
              <fieldset class="form-group">
                <input id="box5" type="checkbox" ng-model="$ctrl.customKey" ng-change="$ctrl.updateRemoteAccount()" ng-disabled="!$ctrl.common.password.length">
                <label for="box5">{{ 'IMPORTANCE_TRANSFER_CUSTOM_KEY' | translate }}</label>
              </fieldset>
            </div>
          </div>
          <!-- ACTIVATE OR DEACTIVATE DELEGATED HARVESTING -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{ 'IMPORTANCE_TRANSFER_MODE_SELECT' | translate }}: </label>
              </span>
              <select class="form-control" ng-options="mode.key as mode.name for mode in $ctrl.modes" ng-model="$ctrl.formData.mode" ng-disabled="!$ctrl.common.password.length">
                <option value="" disabled>{{ 'IMPORTANCE_TRANSFER_MODE_SELECT' | translate }}</option>
              </select>
            </div>
          </fieldset>
          <!-- TRANSACTION FEES -->
          <fieldset class="form-group">
            <div class="input-group">
              <span class="input-group-btn">
                <label>{{'FORM_SIDE_BTN_TX_FEE' | translate}}: </label>
              </span>
              <div class="form-control formFloat" readOnly>
                <span class="feeAmount">
                  <span ng-show="$ctrl.formData.isMultisig">{{($ctrl.formData.innerFee | fmtNemValue)[0]}}.{{($ctrl.formData.innerFee | fmtNemValue)[1]}} +</span>
                  <span>{{($ctrl.formData.fee | fmtNemValue)[0]}}.{{($ctrl.formData.fee | fmtNemValue)[1]}}</span>
                </span>
                <label class="floatRight"><small>XEM</small></label>
              </div>
            </div>
          </fieldset>
          <!-- SEND FIELD -->
          <button class="btn btn-success pull-xs-right"
            type="submit" ng-disabled="$ctrl.okPressed || !$ctrl.common.password.length || $ctrl.formData.remoteAccount.length !== 64" ng-click="$ctrl.send()">
            <i class="fa fa-send"></i> {{ 'GENERAL_SEND' | translate }}
          </button>
        </div>
      </div>

      <div class="col-md-6 col-sm-12">
        <div class="panel-heading">
          <h3>{{ 'IMPORTANCE_TRANSFER_HARVESTING_PANEL' | translate }}</h3>
        </div>
          <!-- <span ng-show="!$ctrl.showInfo"><i class="fa fa-cubes"></i> {{ 'IMPORTANCE_TRANSFER_HARVESTING_PANEL' | translate }}</span>
          <span ng-show="$ctrl.showInfo"><i class="fa fa-info-circle"></i> {{ 'GENERAL_INFORMATION' | translate }}</span>
          <ul class="nav nav-tabs">
            <li ng-class="!$ctrl.showInfo ? 'active' : ''"><a ng-click="$ctrl.showInfo = false;"><i class="fa fa-cloud"></i></a></li>
            <li ng-class="$ctrl.showInfo ? 'active' : ''"><a ng-click="$ctrl.showInfo = true;"><i class="fa fa-info-circle"></i></a></li>
          </ul>
        </div> -->
        <!-- <div class="panel-body" ng-show="$ctrl.showInfo">
            <p><p>{{ 'IMPORTANCE_TRANSFER_INFO_PART_1' | translate }}
              <br><br>
            {{ 'IMPORTANCE_TRANSFER_INFO_PART_MULTISIG' | translate }}</p>
        </div> -->
        <div class="panel-body" ng-show="!$ctrl.showInfo">
          <div ng-show="!$ctrl.multisigData">
            <p>{{ 'IMPORTANCE_TRANSFER_MULTISIG_SELECT_MESSAGE' | translate }}</p>
          </div>
           <div ng-show="$ctrl.multisigData">
             <div class="row">
               <div class="col-md-3">
                 <h5>{{ 'ACCOUNT_REMOTE_STATUS' | translate }}</h5>
                <span ng-show="$ctrl.multisigData.meta.remoteStatus === 'ACTIVE'" style="text-transform: uppercase;color: green;">{{ 'GENERAL_ACTIVE' | translate }}</span>
                <span ng-show="$ctrl.multisigData.meta.remoteStatus === 'INACTIVE'" style="text-transform: uppercase;color: red;">{{ 'GENERAL_INACTIVE' | translate }}</span>
                <span ng-show="$ctrl.multisigData.meta.remoteStatus === 'ACTIVATING'" style="text-transform: uppercase;">{{ 'GENERAL_ACTIVATING' | translate }}</span>
                <span ng-show="$ctrl.multisigData.meta.remoteStatus === 'DEACTIVATING'" style="text-transform: uppercase;">{{ 'GENERAL_DEACTIVATING' | translate }}</span>
                <span  ng-show="$ctrl.multisigData.meta.remoteStatus === 'REMOTE'" style="text-transform: uppercase;">{{ 'GENERAL_REMOTE' | translate }}</span>
               </div>
               <div class="col-md-3">
                <h5>{{ 'IMPORTANCE_TRANSFER_HARVESTING_STATUS' | translate }}</h5>
                <span ng-show="$ctrl.delegatedData.meta.status === 'UNLOCKED'" style="text-transform: uppercase;color: green;">{{ 'GENERAL_ACTIVE' | translate }}</span>
                <span ng-show="$ctrl.delegatedData.meta.status === 'LOCKED'" style="text-transform: uppercase;color: red;">{{ 'GENERAL_INACTIVE' | translate }}</span>
              </div>
               <div class="col-md-3">
                 <h5>{{ 'ACCOUNT_VESTED_BALANCE' | translate }}</h5>
                 <span>{{ ($ctrl.formData.multisigAccount.vestedBalance | fmtNemValue)[0] }},{{ ($ctrl.formData.multisigAccount.vestedBalance | fmtNemValue)[1] }} <small><b>XEM</b></small></span>
               </div>
               <div class="col-md-3">
                <h5>{{ 'ACCOUNT_HARVESTED_BLOCKS' | translate }}</h5>
                <span>
                  <span ng-show="$ctrl.formData.multisigAccount.harvestedBlocks === 0">{{ 'IMPORTANCE_TRANSFER_NO_BLOCKS_HARVESTED' | translate }}</span>
                  <span ng-show="$ctrl.formData.multisigAccount.harvestedBlocks > 0">{{ $ctrl.formData.multisigAccount.harvestedBlocks }}</span>
                </span>
              </div>
            </div>
                <!-- </div> -->
            <div class="panel-heading">
              <h3>{{ 'IMPORTANCE_TRANSFER_DELEGATED_KEYS' | translate }}</h3>
            </div>
            <div class="panel-body">
            <!-- DELEGATED PUBLIC KEY -->
              <fieldset class="form-group">
                <div class="input-group">
                  <span class="input-group-btn">
                    <label>{{ 'ACCOUNT_DELEGATED_PUBLIC' | translate }}: </label>
                  </span>
                  <input type="text" class="form-control" ng-model="$ctrl.remoteAccountPublicView" readOnly>
                </div>
              </fieldset>
            <!-- DELEGATED PRIVATE KEY -->
              <fieldset class="form-group">
                <div class="input-group">
                  <span class="input-group-btn">
                    <label>{{ 'ACCOUNT_DELEGATED_PRIVATE_KEY' | translate }}: </label>
                  </span>
                  <input type="text" class="form-control" ng-model="$ctrl.remotePrivateKey" readOnly>
                </div>
              </fieldset>
            </div>

            <div class="panel-heading">
              <h3>{{ 'ACCOUNT_START_STOP_HARVESTING' | translate }}</h3>
            </div>

            <div class="panel-body" ng-show="$ctrl.isActivator && $ctrl.multisigData.meta.remoteStatus === 'ACTIVE'">

            <p class="bg-info" ng-show="$ctrl.formData.multisigAccount.vestedBalance / 1000000 > 10000">
              <span ng-bind-html="'ACCOUNT_HARVESTING_NOTE' | translate"></span>
            </p>

          <div class="form-group" ng-show="$ctrl.formData.multisigAccount.vestedBalance / 1000000 > 10000">
            <div class="input-group">
            <input class="form-control" type="text" ng-model="$ctrl.harvestingNode" ng-style="!$ctrl.customHarvestingNode ? {'display': 'none'} : ''" ng-model-options="{ debounce: 500 }" ng-disabled="$ctrl.delegatedData.meta.status === 'UNLOCKED'" ng-change="$ctrl.checkNode();$ctrl.updateDelegatedData();"/>
            <select class="form-control" ng-model="$ctrl.harvestingNode" ng-options="(node.uri | toHostname) as (node.uri | toHostname) for node in $ctrl.nodes" ng-style="$ctrl.customHarvestingNode ? {'display': 'none'} : $ctrl.showSupernodes ? {'display': 'none'} : ''" ng-disabled="$ctrl.delegatedData.meta.status === 'UNLOCKED'" ng-change="$ctrl.checkNode();$ctrl.updateDelegatedData();"><option value="" disabled selected>{{ 'ACCOUNT_HARVESTING_NODE_SELECT' | translate }}</option></select>
             <select class="form-control" ng-model="$ctrl.harvestingNode" ng-options="node.ip as node.ip for node in $ctrl.nodes" ng-style="$ctrl.customHarvestingNode ? {'display': 'none'} : !$ctrl.showSupernodes ? {'display': 'none'} : ''" ng-disabled="$ctrl.delegatedData.meta.status === 'UNLOCKED'" ng-change="$ctrl.checkNode();$ctrl.updateDelegatedData();"><option value="" disabled selected>{{ 'ACCOUNT_HARVESTING_NODE_SELECT' | translate }}</option></select>
              <span class="input-group-btn">
                <button ng-class="!$ctrl.customHarvestingNode ? 'active' : ''" class="btn btn-primary" type="button" ng-click="$ctrl.customHarvestingNode = false;" title="{{ 'ACCOUNT_NODE_FROM_LIST' | translate}}"><i class="fa fa-cloud"></i></button>
                <button ng-class="$ctrl.customHarvestingNode ? 'active' : ''" class="btn btn-primary" type="button" ng-click="$ctrl.customHarvestingNode = true;" title="{{'ACCOUNT_CUSTOM_NODE' | translate}}"><i class="fa fa-edit"></i></button>
              </span>
            </div>
            <button class="btn btn-success" type="button" ng-show="$ctrl.delegatedData.meta.status === 'LOCKED'" ng-disabled="$ctrl.noFreeSlots || !$ctrl.common.password.length" ng-click="$ctrl.startDelegatedHarvesting()" title="{{'ACCOUNT_HARVESTING_START' | translate}}" style="margin-top: 10px;width: 100%;"><i class="fa fa-play-circle-o"></i> {{ 'IMPORTANCE_TRANSFER_START_HARVESTING' | translate }}</button>
            <button class="btn btn-danger" type="button" ng-show="$ctrl.delegatedData.meta.status === 'UNLOCKED'" ng-click="$ctrl.stopDelegatedHarvesting()" title="{{'ACCOUNT_HARVESTING_STOP' | translate}}" ng-disabled="!$ctrl.common.password.length" style="margin-top: 10px;width: 100%;"><i class="fa fa-stop-circle-o"></i> {{ 'IMPORTANCE_TRANSFER_STOP_HARVESTING' | translate }}</button>
          </div>

          <p class="bg-info text-center" ng-show="$ctrl.noFreeSlots && $ctrl.delegatedData.meta.status === 'LOCKED' && $ctrl.formData.multisigAccount.vestedBalance  / 1000000 > 10000"><i class="fa fa-exclamation-triangle "></i> {{ 'ACCOUNT_HARVESTING_NO_SLOTS' | translate }}</p>
          <p class="bg-info" ng-show="$ctrl.formData.multisigAccount.vestedBalance / 1000000 < 10000"><i class="fa fa-exclamation-triangle "></i> {{ 'ACCOUNT_HARVESTING_BELOW_THRESHOLD' | translate }}</p>
        <!--</div>-->
        </div>
        <div class="panel-body" ng-show="!$ctrl.isActivator && $ctrl.multisigData.meta.remoteStatus === 'ACTIVE'">
          <p class="bg-info">{{ 'IMPORTANCE_TRANSFER_MULTISIG_NOT_INITIATOR' | translate }}</p>
        </div>
        <div class="panel-body" ng-show="$ctrl.multisigData.meta.remoteStatus === 'ACTIVATING'">
          <p class="bg-info"><i class="fa fa-exclamation-triangle "></i> {{ 'IMPORTANCE_TRANSFER_REMOTE_ACTIVATING' | translate }}</p>
        </div>
        <div class="panel-body" ng-show="$ctrl.multisigData.meta.remoteStatus === 'INACTIVE'">
          <p class="bg-info"><i class="fa fa-exclamation-triangle "></i> {{ 'IMPORTANCE_TRANSFER_REMOTE_INACTIVE' | translate }}</p>
        </div>

           </div>
        </div>


    </div>

  </div>

</div>
